<script src="../utils/httpRequest.js"></script>
<template>
    <!--歌曲播放页面-->
    <div class="singerplayer">

        <div class="SPcenter">
            <!--上面内容  播放-->
            <div class="SMainContent">
                <div class="STurntable">
                    <div class="STneedle">
                        <img class="STneedleImg1" id="needle" src="../assets/play_needle.png" draggable="false"/>
                    </div>
                    <div class="STdisc STdiscActive disk-cover-animation">
                        <div class="STbackcolor">
                            <img :src="selectById.musicImg" >
                        </div>
                        <img src="../assets/play_disc.png"/>
                    </div>
                </div>
                <div class="SText">
                    <p class="STitle" >{{selectById.musicName}}</p>
                    <div class="STextImg">
                        <audio id="audio1"  :src="selectById.musicAdress"></audio>
                        <img src="../assets/play_rdi_btn_play.png" id="play" @click="play()" />
                        <img src="../assets/play_rdi_btn_pause.png" id="pause" @click="pause()"  style="display: none"/>

                    </div>
                </div>
                <div style="clear: both"></div>
            </div>
            <!--下面内容 评论-->
            <div class="SSee">
                <!--左边评论-->
                <div class="SCommment">
                    <p class="STitleP">听友评论<span>(已有294372条评论)</span></p>

                    <input  type="text" placeholder="发表评论"/><br/>
                    <p class="SJingCaiPingLun">精彩评论</p>
                    <div class="TInfomation">
                        <div class="TPicture"><img src="../assets/17.jpg"/></div>
                        <div class="Twenzi">
                            <span class="TName">汉堡汉堡包：</span>
                            <span class="TS2">客观评价，吴亦凡将自己的梗做首歌</span><br/>
                            <span class="TTime">4月19日 10：25</span>
                        </div>
                        <div style="clear: both"></div>
                    </div>

                </div>
                <!--右边随机歌曲-->
                <div class="SRandom">
                    <p style="text-align: left;color: whitesmoke;font-size: 20px;border-bottom: 1px solid #aba3a359;line-height: 35px;">包含这首歌</p>
                    <div class="TInfomation2">
                        <div class="TPicture2"><img src="../assets/17.jpg"/></div>
                        <div class="Twenzi">
                            <span class="TName" style="color: white">需要一些活泼的歌治下丧丧的心</span><br/>
                            <span class="TS2">播放：991万</span>

                        </div>
                        <div style="clear: both"></div>
                    </div>


                    <p style="text-align: left;color: whitesmoke;font-size: 20px;border-bottom: 1px solid #aba3a359s;margin-top: 50px;line-height: 35px;">相似歌曲</p>
                    <div class="TInfomation2">
                        <div class="TPicture2"><img src="../assets/17.jpg"/></div>
                        <div class="Twenzi">
                            <span class="TName" style="color: white">别叫我达芬奇</span><br/>
                            <span class="TS2">Lil Ghost小鬼</span>

                        </div>
                        <div style="clear: both"></div>
                    </div>

                </div>
                <div style="clear: both"></div>
            </div>
        </div>
    </div>
</template>

<script>
    import Top from '@/components/Top.vue'
    import Bottom from '@/components/Bottom.vue'
    export default {
        name: "singerplayer",
        components: {

        },
        data(){
            return{
                selectById:'',


            }
        },
        activated(){
            this.selectById=''
            this.getParams()
        },
        methods:{

            getParams () {
                console.log(this.$route.params.id);
                // 取到路由带过来的参数
                let id = this.$route.params.id;
                this.$http({
                    url: this.$http.adornUrl('/music/selectById'),
                    method: 'get',
                    params: this.$http.adornParams({
                        id : id
                    })
                }).then(({data}) => {
                    console.log("歌曲信息")
                    console.log(data);
                    this.selectById = data.music
                })

            },

            play(){
                // var oPlay = document.getElementById('play');
                // var oPause = document.getElementById('pause');
                // var oMyPlay =
                // oMyPlay.play();
                //
                // oPlay.style.display = 'none'
                // oPause.style.display='block'

                var $playBtn = $('#play');
                var $pauseBtn = $('#pause');
                var player = document.getElementById('audio1');
                var $needle = $('#needle');

                console.log("111")
                player.play();
                $(".disk-cover-animation").css({
                    'animation-play-state': 'running',
                    '-webkit-animation-play-state': 'running'
                });
                $playBtn.hide();
                $pauseBtn.show();

                if (true) {
                    $needle.removeClass("pause-needle").addClass("resume-needle");
                } else {
                    $needle.removeClass("resume-needle").addClass("pause-needle");
                }


            },

            pause(){
                // var oPlay = document.getElementById('play');
                // var oPause = document.getElementById('pause');
                // var oMyPlay =  document.getElementById('audio1');
                // oMyPlay.pause();
                //
                // oPlay.style.display = 'block'
                // oPause.style.display='none'

                var $playBtn = $('#play');
                var $pauseBtn = $('#pause');
                var player = document.getElementById('audio1');
                var $needle = $('#needle');

                console.log("111")
                player.pause();

                if (false) {
                    $needle.removeClass("pause-needle").addClass("resume-needle");
                } else {
                    $needle.removeClass("resume-needle").addClass("pause-needle");
                }

                $(".disk-cover-animation").css({
                    'animation-play-state': 'paused',
                    '-webkit-animation-play-state': 'paused'
                });
                $playBtn.show();
                $pauseBtn.hide();

            },



        },




    }

</script>

<style scoped>
    .singerplayer{

    }
    .SPcenter{
        width: 100%;
        height: 1000px;
        margin: 0 auto;
        background: black;
        margin-top: 100px;
    }
    .SMainContent{
        width: 860px;
        height: 500px;
        background-color: black;
        margin: 0 auto;
    }
    .SSee{
        width: 860px;
        height: 500px;
        background-color: black;
        margin: 0 auto;
    }
    .STurntable{
        width: 50%;
        height: 500px;
        background-color: black;
        float: left;
        border: 1px solid red;
    }
    .SText{
        width: 49%;
        height: 500px;
        background-color: black;
        float: right;
        border-right: 1px solid red;

    }
    .SCommment{
        width: 55%;
        height: 500px;
        background-color: black;
        float: left;
    }
    .SRandom{
        width: 40%;
        height: 500px;
        background-color: black;
        float: right;
    }
    .STitle{
        text-align: left;
        color: white;
        font-size: 24px;
        font-weight: bold;
    }
    .SCommment input{
        float: left;
        width: 100%;
    }
    .SCommment .STitleP{
        text-align: left;
        color: white;
        font-size: 20px;
        padding-bottom: 10px;
        border-bottom: 1px solid #aba3a359;
    }
    .SCommment .STitleP span{
        color: black;
        font-size: 13px;
    }
    .SJingCaiPingLun{
        text-align: left;
        color: white;
    }
    .TInfomation{
        height: 70px;
        width: 100%;
        text-align: left;
        line-height: 25px;

    }
    .TInfomation .TPicture img{
        width: 50px;
        height:50px;
        border-radius: 50%;
    }
    .TInfomation .TName{
        color: orange;

    }
    .TInfomation .TTime{
        color: white;
    }
    .TPicture{
        width: 14%;
        float: left;

    }
    .TInfomation2 img{
        width: 50px;
        height:50px;

    }
    .TPicture2{
        width: 20%;
        float: left;
    }

    .Twenzi{
        width: 80%;
        float: left;
        text-align: left;
    }
    .TS2{
        color:darkgrey;
    }
    .STneedle{

    }
    /*指针的变化，点击时*/
    .STneedleImg1{
        position: relative;
        top: -14px;
        width: 21%;
        height: 20%;
        z-index: 100;
        transform-origin: 20px 20px;

    }
    .STneedleImg2{
        position: relative;
        top: -14px;
        width: 21%;
        height: 20%;
        z-index: 100;transform-origin: 20px 20px;


    }
    .STdisc{
        position: absolute;
        top: 165px;
        left: 550px;
        z-index: 10;
    }
    .STdiscActive{

    }
    .STdisc img{
        background-color: #544c4c96;
        border-radius: 50%;
    }

    .STbackcolor img{
        width: 260px;
        height: 260px;
        /*background-color: red;*/
        position: absolute;
        top: 50px;
        left: 50px;
        border-radius: 50%;
        z-index: 5;
    }
    .STextImg{
        text-align: left;
    }

    .disk-cover-animation {
        animation: rotate-disk 20s infinite normal linear;
        animation-play-state: paused;
        -webkit-animation: rotate-disk 20s infinite normal linear;
        -webkit-animation-play-state: paused;
    }

    @keyframes rotate-disk {
        100% {
            transform: rotateZ(360deg);
        }
    }

    @-webkit-keyframes rotate-disk {
        100% {
            -webkit-transform: rotateZ(360deg);
        }
    }


    @keyframes rotate-needle-pause {
        100% {
            transform: rotateZ(-20deg);
        }
    }

    @keyframes rotate-needle-resume {
        0% {
            transform: rotateZ(-20deg);
        }
        100% {
            transform: rotateZ(0deg);
        }
    }

    /**
     *  方便在js中add/remove class 来实现动画效果的启用和停用
     */
    .pause-needle {
        animation: rotate-needle-pause 0.5s 1 normal linear;
        animation-fill-mode: forwards;
    }

    .resume-needle {
        animation: rotate-needle-resume 0.5s 1 normal linear;
        animation-fill-mode: forwards;
    }
</style>